/*
 * @Description: 
 * @Author: Zhang Zhangda
 * @Date: 2021-02-23 18:08:52
 * @LastEditTime: 2021-02-27 08:13:58
 * @LastEditors: Zhang Zhaoda
 */
import { RouteComponentProps } from "react-router-dom"
//引入样式
import { FC, useEffect, useState, useCallback } from "react"
//引入仓库工具
import { useDispatch, useSelector } from "react-redux";
import { bindActionCreators } from "redux"
import TypeCss from "./css/type.module.scss"
//引入actions
import * as action from "@/store/actions/type.actions"
import { Istate } from "@/store/reducers/type.reducer";

//引入子组件
import TypeComponent from "./component/TypeComponent"
interface Iprops extends RouteComponentProps {
  history:any
}
interface Typestate {
  typereducer: Istate
}
let Type: FC<Iprops> = function (props) {
  let { typeData, typeKey } = useSelector(({ typereducer }: Typestate) => typereducer)
  let dispatch = useDispatch()

  let { getTypeData, changeKey } = bindActionCreators(action, dispatch)

  //tab下标
  let [carIndex, setCarIndex] = useState(0);
  let {code,SerialID,ColorId}=props.history.location.state;
  
  useEffect(() => {

    getTypeData(SerialID)
  }, [])

  //tab切换事件
  let changeIndex = useCallback((key, index) => {
    //改变tab切换key
    changeKey(key)
    //改变下标
    setCarIndex(index)
  }, [carIndex, typeKey])

  //点击跳回
  let jumpBack = (CarID: string) => {
    
    props.history.push({ pathname:`/${code}`, state: { CarID,SerialID,ColorId,code } })
  }

  //渲染
  return <div id={TypeCss.type}  className="animate__animated animate__fadeInUpBig">
    <TypeComponent 
      typeData={typeData} 
      typeKey={typeKey} 
      carIndex={carIndex}
      changeIndex={changeIndex}
      jumpBack={jumpBack}
      code={code}
      >
    </TypeComponent>
  </div>
}
export default Type
